<template>
    <div id="framePop" >
        <transition name="mark_tran" @click="change">
            <div class="pop_mark" v-show="isShow" :style="'z-index:'+zIndexMark"></div>
        </transition>
        
        <transition name="pop_div_elastic_tran">
            <div class="pop_div"  v-show="isShow" :style="'z-index:'+zIndexPop">
                <div class="pop_head" v-if="n_data.title != null && n_data.title != ''">
                    <i class="bi bi-x-circle ver-mid" style="color:red" v-if="n_data.type == 'error'"></i>
                    <i class="bi bi-check-circle ver-mid" style="color:var(--success-background-dark);" v-else-if="n_data.type == 'success'"></i>
                    <i class="bi bi-exclamation-circle ver-mid" style="color:var(--warning-background-dark);" v-else-if="n_data.type == 'warning'"></i>
                    <span v-html="n_data.title"></span>
                </div>
                <div class="pop_body">
                    <!-- 这里是body -->
                    <div v-html="n_data.body" v-if="plugin == undefined || !plugin.enable || plugin == null"></div>
                    <div v-else-if="plugin.bodyType == 'input'">
                        <input type="text" class="inp input-10" :placeholder="plugin.placeholder"  :style="plugin.style" v-model="inp_val"/>
                    </div>
                    <div v-else-if="plugin.bodyType == 'select'">
                        <g-f-select class="col-10" :abs="false" :back_data="n_data.back_data" text="请选择" name="type" :data="plugin.data"  v-model="inp_val" ref="select"></g-f-select>
                    </div>
                    
                </div>
                <div class="pop_foot">
                    <button :class="{btn:true,default_btn:n_data.confirm,default_btn_nobg:!n_data.confirm}" @click="cancel(opera)" v-html="opera.cancel.text"></button>
                    <button class="btn primary_btn" :back_data="n_data.back_data" v-if="n_data.confirm" @click="ok(opera)" v-html="opera.next.text"></button>
                </div>
            </div>
        </transition>
    </div>
    
</template>
<script>
import selectItem from '../form/form_item/SelectItem.vue';
import {ref,onMounted} from 'vue';
export default {
    name:'g-pop',
    components:{
        "g-f-select":selectItem
    },
    props:{
        pop_data:{
            type:Object,
            default:{}
        },
        zIndexMark:{
            type:Number,
            default:998
        },
        zIndexPop:{
            type:Number,
            default:998
        },
        proxy:{
            type:Object,
            proxy:{}
        }
    },
    setup(props){
        let isShow = ref(false);
        let inp_val = ref(props.pop_data.back_data);

        let n_data = ref({});
        let plugin = ref({});

        let select = ref(null);
        let proxy = ref(props.proxy);

        let opera = ref({
            cancel:{
                text:'取消'
            },
            next:{
                text:'确定'
            }
        })

        onMounted(()=>{
            isShow.value = !isShow.value;

            n_data.value = props.pop_data;
            plugin.value = props.pop_data.plugin;
            opera.value = props.pop_data.opera;
            // 懒加载方法，当组件加载完成之后执行，并且返回n_data的当前数据
            if(props.pop_data.lazyLoad != undefined && props.pop_data.lazyLoad != null){
                props.pop_data.lazyLoad(n_data.value);
            }
            
        })
        
        let change = ()=>{
            isShow.value = !isShow.value;
            
            setTimeout(() => {
                proxy.value.$removePop();
            }, 400);
        }

        // 确认按钮操作
        let ok = (opera)=>{
            console.log(plugin);
            if(plugin.value != null && plugin.value != undefined){
                if(plugin.value.bodyType == 'input'){
                    opera.next.success(change,inp_val);
                }
                else if(plugin.value.bodyType == 'select'){
                    opera.next.success(change,select.value.main_text.value);
                }
            }else{
                opera.next.success(change,null);
            }
            
            
        }

        // 取消按钮操作
        let cancel = (opera)=>{
            opera.cancel.calloff(change);
            
        }
        
        return {
            // 变量
            select,
            n_data,plugin,opera,
            isShow,inp_val,
            // 方法
            ok,cancel,
            close,change
        }
    }
}
</script>
<style scoped>
    #framePop{
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(12,1fr);
        grid-template-rows: repeat(8,1fr);
        z-index: 999;
    }
    .pop_mark{
        grid-area: 1/1/span 8/span 12;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 999;
    }
    
    .pop_head i,
    .pop_body i{
        font-size: 25px;
    }
    
    .pop_foot button{
        margin: 0 10px;
    }
</style>